<template>
	<div>
		
		 <el-table  :data="tableData"  style="width: 100%">
			  <el-table-column
		        prop="date"
		        label="日期"
		        width="180">
		      </el-table-column>
			  
		      <el-table-column
		        prop="name"
		        label="姓名"
		        width="180">
		      </el-table-column>
			  
		      <el-table-column
		        prop="address"
		        label="地址">
		      </el-table-column>
			  
		    </el-table>
		
		
	</div>
</template>

<script>
	
	import axios from 'axios'
	
	
	export default {
		name:'ToDoList',
		data(){
			return  {
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				  }, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				  }, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				  }, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				  }]
			}
		},
		methods:{
			queryData(){
				// let that = this
				// axios.get('http://localhost:8080/mvc/human')
				axios.get('/api/human')
				  .then( (response) => {
					  
					  //response 封装的返回结果
					  
					// 处理成功情况
					// console.log(response);
					// console.log(response.data);
					// console.log(this.tableData);
					this.tableData = response.data
				  })
				  .catch(function (error) {
					// 处理错误情况
					console.log(error);
				  });
				  
			}
		},
		computed:{
			
		},
		//在组件呗创建的时候加载数据 初始化
		created() {
			console.log("准备查询数据....")
			this.queryData()
		}
	}
</script>

<style>
	
	
</style>
